import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { Dimensions, ImageCroppedEvent, ImageTransform } from 'ngx-image-cropper';
import { PiplineConifg } from 'src/components/scenarios/models';
import { Logger } from 'src/service/logger';

interface UploadEvent {
  originalEvent: Event;
  files: File[];
}

@Component({
  selector: 'upload-com',
  templateUrl: './upload-config.component.html',

})
export class uplodaComponent {

  visible: boolean = false;
  imgUrl: string = '';
  position: string = 'left';
  showDialog() {
    this.visible = true;
  }
  sidebarVisible: boolean = false;

  item?: PiplineConifg;

  imageChangedEvent: any = '';
  croppedImage: any = '';
  canvasRotation = 0;
  rotation?: number;
  translateH = 0;
  translateV = 0;
  scale = 1;
  aspectRatio = 4 / 3;
  showCropper = false;
  containWithinAspectRatio = false;
  transform: ImageTransform = {
    translateUnit: 'px'
  };
  imageURL?: string;
  loading = false;
  allowMoveImage = false;
  hidden = false;

  constructor(
    private sanitizer: DomSanitizer,
    private logger:Logger
  ) {
  }

  confirm() {
    this.imgUrl = this.croppedImage.changingThisBreaksApplicationSecurity;
  }

  onFileButtonClick() {
    const fileInput = document.getElementById('fileInput') as HTMLInputElement;
    fileInput.click();
  }
  fileChangeEvent(event: any): void {
    this.loading = true;
    this.imageChangedEvent = event;
  }
  onWheel(event: WheelEvent) {
    const scrollDirection = event.deltaY < 0 ? 'down' : 'up';
    if (scrollDirection === 'down') {
      this.zoomIn();
    } else {
      this.zoomOut();
    }
  }
  imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = this.sanitizer.bypassSecurityTrustUrl(event.objectUrl || event.base64 || '');
  }
  imageLoaded() {
    this.showCropper = true;
  }

  cropperReady(sourceImageDimensions: Dimensions) {
    this.loading = false;
  }

  loadImageFailed() {
    this.logger.error('Load image failed');
  }
  zoomOut() {
    this.scale -= .1;
    this.transform = {
      ...this.transform,
      scale: this.scale
    };
  }

  zoomIn() {
    this.scale += .1;
    this.transform = {
      ...this.transform,
      scale: this.scale
    };
  }
  goLeft() {
    this.transform = {
      ...this.transform,
      translateH: ++this.translateH
    };
  }

  goRight() {
    this.transform = {
      ...this.transform,
      translateH: --this.translateH
    };
  }

  goUp() {
    this.transform = {
      ...this.transform,
      translateV: ++this.translateV
    };
  }

  goDown() {
    this.transform = {
      ...this.transform,
      translateV: --this.translateV
    };
  }
  reset() {
    this.scale = 1;
    this.rotation = 0;
    this.canvasRotation = 0;
    this.transform = {
      translateUnit: 'px'
    };
  }


}
